<template>
  <a-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item field="userName" label="用户名" validate-trigger="blur">
      <a-input v-model="formData.userName" placeholder="请输入用户名..." />
    </a-form-item>
    <a-form-item field="gender" label="性别">
      <a-select v-model="formData.gender" placeholder="请选择..." allow-clear>
        <a-option :value="0">女</a-option>
        <a-option :value="1">男</a-option>
      </a-select>
    </a-form-item>
    <a-form-item field="email" label="邮箱" validate-trigger="blur">
      <a-input v-model="formData.email" placeholder="请输入邮箱..." />
    </a-form-item>
    <a-form-item field="phone" label="电话" validate-trigger="blur">
      <a-input v-model="formData.phone" placeholder="请输入电话..." />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" @click="validate"> 确认</a-button>
        <a-button type="secondary" @click="reset"> 重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { effect, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import {
    getCurrentUserUsingGet,
    updateUserUsingPost,
  } from '@/service/bbeacons-backend/sysUserController';
  import { ValidatedError } from '@arco-design/web-vue/es/form/interface';

  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store';
  // eslint-disable-next-line no-undef
  import SysUserUpdateRequest = API.SysUserUpdateRequest;

  const userStore = useUserStore();
  const formRef = ref<FormInstance>();
  const router = useRouter();
  const formData = ref<SysUserUpdateRequest>({
    email: '',
    phone: '',
    userName: '',
    gender: 0,
    userAvatar: '',
  });

  const loadData = async () => {
    const data = await getCurrentUserUsingGet();
    formData.value = data;
  };

  effect(() => {
    loadData();
  }, {});

  const update = async () => {
    const res = await updateUserUsingPost(formData.value);
    if (res) {
      await userStore.info();
      router.push({
        name: 'Workplace',
      });
      Message.success('更新成功');
    }
  };
  const validate = async () => {
    const res = await formRef.value?.validate();
    formRef.value?.validate(
      (errors: undefined | Record<string, ValidatedError>) => {
        if (errors === undefined) {
          update();
        }
      }
    );
  };
  const reset = async () => {
    await formRef.value?.resetFields();
  };

  const rules = {
    userName: [
      {
        required: true,
        message: '用户名不能为空',
      },
    ],
    gender: [{ required: true, message: '必须选择' }],
    email: [
      {
        required: true,
        type: 'email',
        message: '邮箱格式错误',
      },
    ],
  };
</script>

<style scoped lang="less">
  .form {
    width: 540px;
    margin: 0 auto;
  }
</style>
